<template>
  <div class="loginForm">
    <div @keypress.enter="loginBtn('userLogin')">
      <Form :model="userInfoTmp" ref="userLogin" :label-width="60" :rules="loginRules">
        <FormItem prop="username" label="用户名">
          <Input class="login-item" v-model="userInfoTmp.username" :maxlength="12" name="username" autofocus autocomplete="on" placeholder="请输入用户名"></Input>
        </FormItem>
        <FormItem prop="password" label="密码">
          <Input class="login-item" v-model="userInfoTmp.password" :maxlength="16"  type="password" name="password" autocomplete="on" placeholder="请输入密码"></Input>
        </FormItem>
        <FormItem>
          <Button class="login-item" type="info" icon="log-in" @click.stop="loginBtn('userLogin')">登录</Button>
          <Button type="text" class="Toregist" @click="toRegist">注册用户</Button>
        </FormItem>
      </Form>
    </div>
    <Modal
        v-model="regist.isOpen"
        title="注册"
        :mask-closable="false"
        class-name="registBox"
        >
      <div slot="footer"></div>
      <Regist></Regist>
    </Modal>
  </div>
</template>
<script>
import Regist from "@/components/template/regist";
export default {
  data() {
    let _this = this;
    function loginRules(rule, value, callback, source) {
      switch (rule.fullField) {
        case "username":
          if (!/^\S{4,12}$/.test(value)) callback(new Error("用户名应该为4-12位非空字符"));
          break;
        case "password":
          if (!/^\S{6,16}$/.test(value)) callback(new Error("密码应该为6-16位非空字符"));
          break;
        default:
          break;
      }
      callback();
    }
    return {
      userInfoTmp: {
        username: "forxjs",
        password: "123456"
      },
      loginRules: {
        username: [
          {
            required: true,
            message: "用户名不能为空"
          },
          {
            validator: loginRules
          }
        ],
        password: [
          {
            required: true,
            message: "密码不能为空"
          },
          {
            validator: loginRules
          }
        ]
      },
      regist: {
        isOpen: false
      }
    };
  },
  name: "loginForm",
  methods: {
    login() {
      this.$http({
        url: "user_login",
        params: this.userInfoTmp
      })
        .then(data => {
          let info = data.body;
          if (info[1].session.length == 32) {
            this.$root.bus.user = info;
            const local = JSON.stringify(info);
            window.localStorage.userInfo = local;
            this.$Message.success("登陆成功");
            this.$router.push({ name: "folder", params: { fid: "root" } });
          }
        })
        .catch(() => {
          this.$Message.error("登录失败");
        });
    },
    loginBtn(name) {
      this.$refs[name].validate(valid => {
        if (valid) this.login();
      });
    },
    toRegist() {
      this.regist.isOpen = true;
    }
  },
  components: { Regist }
};
</script>
<style lang="less" scoped>
.loginForm {
  .login-item {
    // margin: 8px 0;
  }
}
</style>

